<template>
    <!-- 散点图 -->
    <div class="app-container">
        <el-row :gutter="30" :style="{height: '400px', width: '100%'}">
            <div class="chart" ref="chart" :style="{height:'100%',width:'100%'}"></div>
        </el-row>
    </div>
</template>

<script>
import echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from '@/views/dashboard/mixins/resize'

export default {
    name: 'ChartScatter',
    mixins: [resize],
    data() {
        return {
            chart: null
        }
    },
    mounted() {
        this.$nextTick(() => {
            this.initChart()
        })
    },
    beforeDestroy() {
        if (!this.chart) {
            return
        }
        this.chart.dispose()
        this.chart = null
    },
    methods: {
        initChart() {
            this.chart = echarts.init(this.$refs['chart'], 'macarons')
            this.setOptions(this.chartData)
        },
        setOptions() {
            this.chart.setOption({
                title: {
                    text: '气泡图',
                },
                tooltip: {
                    trigger: 'axis', //触发类型,默认数据触发，可选为:'item' | 'axis'
                    showDelay: 0,
                    axisPointer: {
                        type: 'cross', //坐标轴指示器，默认type为line,可选为：'line' | 'cross' | 'shadow' | 'none'(无)
                        lineStyle: {
                            type: 'dashed',
                            width: 1
                        }
                    }
                },
                legend: {
                    data: ['scatter1', 'scatter2']
                },
                toolbox: {
                    show: true,
                    feature: {
                        mark: {
                            show: true
                        },
                        dataZoom: {
                            show: true
                        },
                        dataView: {
                            show: true,
                            readOnly: true
                        },
                        restore: {
                            show: true
                        },
                        saveAsImage: {
                            show: true
                        }
                    }
                },
                xAxis: [
                    {
                        type: 'value',
                        splitNumber: 4, //分割段数，默认为5
                        power: 100, //整数精度，默认为100。个数和百位为0
                        scale: true, //是否脱离0值比例。设置成true后坐标刻度不会包括强制包含零刻度。再爽数值轴的散点图中比较有用
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        power: 1,
                        scale: true,
                        splitNumber: 4,
                    }
                ],
                series: [
                    {
                        name: 'scatter1',
                        type: 'scatter',
                        symbol: 'circle',
                        data: [
                            [-69, 58, 70],
                            [10, 74, 29],
                            [-11, 68, 99],
                            [10, 76, 53],
                            [-79, -9, 93],
                            [-81, -67, 56],
                            [-95, -71, 50],
                            [-7, 22, 5],
                            [-57, -67, 73],
                            [16, 58, 73],
                            [-65, 30, 56],
                            [4, -75, 3],
                            [-65, 92, 98],
                            [30, -65, 29],
                            [-11, -37, 75]
                        ],
                        symbolSize: function anonymous(value) {
                            let radius = (value[2] - 0) * 16 / 100 + 4
                            return Math.max(Math.round(radius), 1) || 1
                        }
                    },
                    {
                        name: 'scatter2',
                        type: 'scatter',
                        symbol: 'circle',
                        data: [
                            [76, 72, 50],
                            [-67, 70, 52],
                            [26, 20, 71],
                            [-57, -63, 93],
                            [-19, -49, 78],
                            [46, 28, 71],
                            [-87, -97, 7],
                            [-81, -59, 71],
                            [32, 28, 49],
                            [68, 88, 73],
                            [20, -47, 46],
                            [-61, 18, 89],
                            [-89, -3, 92],
                            [-19, -27, 43],
                            [-55, -67, 18]
                        ],
                        symbolSize: function anonymous(value) {
                            let radius = (value[2] - 0) * 16 / 100 + 4
                            return Math.max(Math.round(radius), 1) || 1
                        }
                    }
                ]
            });
        }
    }
}
</script>